<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>待结算施工队
          </p>
        </div>
        <div class="topright">
          <!--<el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>-->
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>

    <div class="table">
      <el-table ref="multipleTable" :data="info" tooltip-effect="dark" style="width:100%" border>
        <el-table-column label="项目部" align="center" prop="departName"></el-table-column>
        <el-table-column label="施工队" align="center" prop="orgName"></el-table-column>
        <el-table-column label="已结算金额（元）" align="center" prop="accountMoney"></el-table-column>
        <el-table-column label="未结算金额（元）" align="center" prop="waitMoney"></el-table-column>
        <!--<el-table-column label="操作" align="center" v-if="(ms_roleName == 'CenterFinanceManager' ||  ms_roleName == 'CenterFinanceClerk')">-->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
             <a class="options" @click="handlePay(scope.row)">付款</a>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--付款信息-->
    <div class="component-model component-modelPay">
      <el-dialog title="付款信息" :visible.sync="payFlag" width="600px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
          <el-form-item label="付款金额：" prop="money" style="margin-bottom: 20px;">
            <el-input v-model="ruleForm.money" style="width: 350px;margin-left: -70px;"></el-input>
          </el-form-item>
          <el-form-item label="付款银行卡号：" prop="payCards" style="margin-bottom: 20px;">
            <el-select v-model="ruleForm.payCards" placeholder="请选择付款银行卡号" style="width:350px;margin-left: -70px;" @change="changePay">
              <el-option v-for="(item,index) in payList" :label="item.accountNo" :value="item.accountId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收款银行卡号：" prop="cards" style="margin-bottom: 20px;">
            <el-select v-model="ruleForm.cards" placeholder="请选择付款银行卡号" style="width:350px;margin-left: -70px;"  @change="receiveCards">
              <el-option v-for="(item,index) in receList" :label="item.accountNo" :value="item.accountId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收款人：" prop="name" style="margin-bottom: 20px;">
            <el-input v-model="ruleForm.name" style="width: 350px;margin-left: -70px;"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="payBtn">
              <a @click="submitForm('ruleForm')">完成</a>
              <a @click="resetForm('ruleForm')">重置</a>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

  </div>
</template>

<script>
export default {
  name: "unProject",
  data() {
    return {
      Visible: false,
      digVisible: false,
      Title1: "审核记录详情",
      Title: "待处理施工队结算",
      info: [],
      list:[{
          name:"项目经理"
      }],
      radio: "1",
      desc: "",
      payFlag:false,//付款信息
      ruleForm: {
        money:'',//付款金额
        payCards:'',//付款人银行卡号
        cards:'',//收款人银行卡号
        name: '',//付款人
      },
      rules: {
        money: [
          {required: true, message: '请输入付款金额', trigger: 'blur'},
        ],
        name: [
          {required: true, message: '请输入收款人', trigger: 'blur'},
        ],
        cards: [
          {required: true, message: '请输入收款人银行卡号', trigger: 'change'},
        ],
        payCards:[
          { required: true, message: '请选择付款人银行卡号', trigger: 'change' }
        ]
      },
      newArray:{},
      payList:[],//付款银行卡号
      receList:[],//收款银行卡号
    };
  },
  created() {},
  mounted() {
    this.dataInit();
  },
  methods: {
    dataInit(){
      let that = this;
      let suCb = function(res){
        that.info = res.data.data;
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
      }
      let palyParam = {
        url: "/api/web/proTeamColse/getWaitPayProTeam",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //点击付款
    handlePay(val){
      console.log(val);
      this.payFlag = true;
      this.ruleForm = {
        money:'',//付款金额
        payCards:'',//付款人银行卡号
        cards:'',//收款人银行卡号
        name: '',//付款人
      }
      this.payCounts();//付款银行卡号
      this.receCounts();//收款银行卡号
      this.teamId = val.proTeamId;//施工队负责项目Id
      this.proId = val.pid;//项目Id
    },
    //付款完成
    paySuccess(){
      let that = this;
      let suCb = function(res){
        that.payFlag = false;
        that.dataInit();
        console.log(res)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        proTeamId: that.teamId,
        proId: that.proId,
        payAccount: that.ruleForm.payCards,
        arrivalAccount: that.ruleForm.cards,
        arrivalMoney: that.ruleForm.money,
        belongOrg:that.newArray.belongOrg
      }
      let palyParam = {
        url: "/api/web/proTeamColse/updatePayStatus",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.paySuccess()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //选择付款银行
    changePay(){
      this.newArray = this.payList.find((item) => {
        if(item.accountId === this.ruleForm.payCards){
          return item
        }
      });
      console.log(this.newArray)
    },
    //付款银行卡号
    payCounts(){
      let that = this;
      let suCb = function(res){
        that.payList = res.data.data || [];
        console.log(that.payList)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        orgType:"0"
      }
      let palyParam = {
        url: "/api/web/proTeamColse/getBankAccount",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //选择收款
    receiveCards(){
      console.log(111)
      this.newArrays = this.receList.find((item) => {
        if(item.accountId === this.ruleForm.cards){
          return item
        }
      });
      console.log(this.newArrays)
      this.ruleForm.name = this.newArrays.orgname;
    },
    //收款银行卡号
    receCounts(){
      let that = this;
      let suCb = function(res){
        that.receList = res.data.data || [];
        console.log(res.data.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        orgType:"2"
      }
      let palyParam = {
        url: "/api/web/proTeamColse/getBankAccount",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    }
  },
  watch: {}
};
</script>
<style scoped>
.table {
  width: 1100px;
  margin: 20px auto;
}
a {
  cursor: pointer;
  color: #1abc9c;
  text-decoration: none;
}
.payBtn a{
  padding: 10px 20px;
}
.payBtn a:first-of-type{
  background: #1ABC9C;
  color: #fff;
  border-radius: 4px;
}
.payBtn a:last-of-type{
  border:1px solid #ccc;
  margin-left: 20px;
  border-radius: 4px;
}
</style>
